<template>
  <div>
    <div>
      <el-form class="form-container" :model="form">
        <el-form-item label="学生学号" label-width="60px" style="width: 280px;" inline>
          <el-input placeholder="请输入学生学号" v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="60px">
          <el-radio-group v-model="form.sex">
            <el-radio-button label="不限" value="0"/>
            <el-radio-button label="男" value="1"/>
            <el-radio-button label="女" value="2"/>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="inline-form-item">
          <el-button type="primary" color="green" :icon="Search" title="学生查询"></el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align: right;margin-bottom: 2px;">
      <el-button type="primary" :icon="Plus" title="创建学生" @click="showCreateDialog"></el-button>
    </div>
    <el-table :data="tableData" stripe border style="width: 100%" class="el-table" :highlight-current-row="true"
              empty-text="未查询任何学生信息">
      <el-table-column label="序号" header-align="center" width="60" align="right">
        <template #default="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="code" label="学号" header-align="center" width="100"/>
      <el-table-column prop="name" label="姓名" header-align="center" width="100"/>
      <el-table-column prop="mobile" label="手机号" header-align="center" align="center"/>
      <el-table-column prop="nation" label="民族" header-align="center"/>
      <el-table-column prop="polit" label="政治面貌" header-align="center"/>
      <el-table-column prop="sex" label="性别" header-align="center" align="center">
        <template #default="scope">
					<span v-if="1==scope.row.sex">
						<span style="color: blue;">男</span>
					</span>
          <span v-else-if="2==scope.row.sex">
						<span style="color: red;">女</span>
					</span>
          <span v-else>
						<span style="color: gold;">未知</span>
					</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" header-align="center">
        <template #default="scope">
          <el-button type="info" :icon="ZoomIn" title="详情" color="green"
                     @click="showDetailsDialog(scope.$index)"></el-button>
          <el-button type="primary" :icon="Edit" title="修改" @click="showModifyDialog(scope.$index)"></el-button>
          <el-button type="danger" :icon="Delete" title="删除" @click="deleteStudent(scope.$index)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <PaginationUI :total="100"></PaginationUI>
    <!-- 创建学生对话框 -->
    <CreateDialog ref="createDialog"></CreateDialog>
    <!-- 修改学生对话框 -->
    <ModifyDialog ref="modifyDialog"></ModifyDialog>
    <!-- 显示学生详细信息-->
    <DetailsDialog ref="detailsDialog"></DetailsDialog>

  </div>
</template>

<script setup>
//导入图标
import {Delete, Edit, Plus, Search, ZoomIn} from '@element-plus/icons-vue';
import {ref} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus'
//创建学生对话框
import CreateDialog from './CreateDialog.vue';
//修改学生对话框
import ModifyDialog from './ModifyDialog.vue';
//显示学生详细信息
import DetailsDialog from './DetailsDialog.vue';
//导入分页查询的控件
import PaginationUI from "@views/common/PaginationUI.vue"
//查询表单响应数据
const form = ref({
  sex: '0',
  code: ''
});
//当前删除记录索引
// ... existing code ...
const tableData = ref([{
  name: '朱一丹',
  code: 'T001',
  nation: '汉族',
  polit: '共产党员',
  sex: '1',
  birthday: '2003-10-11',
  mobile: '15905539558',
},
  {
    name: '李华',
    code: 'T002',
    nation: '蒙古族',
    polit: '共青团员',
    sex: '2',
    birthday: '2004-03-20',
    mobile: '13800138000',
  },
  {
    name: '王三明',
    code: 'T003',
    nation: '汉族',
    polit: '群众',
    sex: '1',
    birthday: '2002-05-15',
    mobile: '13912345678',
  },
  {
    name: '张林丽',
    code: 'T004',
    nation: '回族',
    polit: '共青团员',
    sex: '2',
    birthday: '2001-08-22',
    mobile: '13787654321',
  },
  {
    name: '刘强西',
    code: 'T005',
    nation: '壮族',
    polit: '共产党员',
    sex: '1',
    birthday: '2000-12-30',
    mobile: '13611223344',
  },
  {
    name: '陈云芳',
    code: 'T006',
    nation: '汉族',
    polit: '群众',
    sex: '2',
    birthday: '2003-04-17',
    mobile: '13555666777',
  },
  {
    name: '杨军',
    code: 'T007',
    nation: '土家族',
    polit: '共青团员',
    sex: '1',
    birthday: '2002-07-11',
    mobile: '13444555666',
  },
  {
    name: '黄霖玲',
    code: 'T008',
    nation: '苗族',
    polit: '共产党员',
    sex: '2',
    birthday: '2001-09-05',
    mobile: '13333444555',
  },
  {
    name: '吴正刚',
    code: 'T009',
    nation: '汉族',
    polit: '群众',
    sex: '1',
    birthday: '2000-02-28',
    mobile: '13222333444',
  },
  {
    name: '赵志敏',
    code: 'T010',
    nation: '维吾尔族',
    polit: '共青团员',
    sex: '2',
    birthday: '2003-11-19',
    mobile: '13111222333',
  }
]);
// ... existing code ...
let createDialog = ref(null);
let modifyDialog = ref(null);
let detailsDialog = ref(null);
//打开删除学生对话框
const deleteStudent = (rowIndex) => {
  let student = tableData.value[rowIndex];
  ElMessageBox.confirm(`确认要删除学生【${student.name}】的信息吗?`, '删除学生',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    // 用户点击了“确定”
    tableData.value.splice(rowIndex, 1);
    ElMessage({message: '删除成功', type: 'success'});
  })
      .catch(() => {
        // 用户点击了“取消”
        ElMessage({message: '已取消删除', type: 'info'});
      });
}
//打开修改学生对话框
const showModifyDialog = (rowIndex) => {
  modifyDialog.value.dialogVisible = true;
  modifyDialog.value.form = tableData.value[rowIndex];
}
//打开显示详细信息对话框
const showDetailsDialog = (rowIndex) => {
  detailsDialog.value.dialogVisible = true;
  detailsDialog.value.student = tableData.rowIndex[rowIndex];
}
//打开创建学生对话框
const showCreateDialog = () => {
  createDialog.value.dialogVisible = true;
}
</script>
<style scoped>
.form-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;

}

.inline-form-item {
  margin-left: 20px;
}
</style>